<template>
  <div class="item">
    <input type="text" :value="inp">
<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">服装</template>
    <ul><li v-for="item in arr" @click="clickItem(item)" class="item1">{{item}}</li></ul>
  </el-collapse-item>
</el-collapse>
<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">服装</template>
    <ul><li v-for="item in arr" @click="clickItem(item)" class="item1">{{item}}</li></ul>
  </el-collapse-item>
</el-collapse>
<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">服装</template>
    <ul><li v-for="item in arr" @click="clickItem(item)" class="item1">{{item}}</li></ul>
  </el-collapse-item>
</el-collapse>
<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">服装</template>
    <ul><li v-for="item in arr" @click="clickItem(item)" class="item1">{{item}}</li></ul>
  </el-collapse-item>
</el-collapse>
  </div>
</template>

<script>
export default {
data(){
return{
arr:['衣服1','衣服2','衣服3','衣服4','衣服5','衣服6' ],
inp:'',
}
},
methods:{
clickItem(a){
this.inp=a;

},

}
}
</script>

<style>
.item{
width: 300px;
}
.item1{
border-bottom: 1px  solid gainsboro;
height: 40px;
line-height: 40px;
}
</style>